<template>
	<view 
		class="tool-card" 
		:style="cardStyle"
		@tap="handleTap"
	>
		<view class="card-content">
			<view class="tool-icon">
				<text class="icon-text">{{ tool.icon }}</text>
			</view>
			<view class="tool-info">
				<text class="tool-name">{{ tool.name }}</text>
				<text class="tool-description">{{ tool.description }}</text>
			</view>
			<view class="card-arrow" v-if="showArrow">
				<text class="arrow-text">→</text>
			</view>
		</view>
		
		<!-- 装饰元素 -->
		<view class="card-decorations">
			<view class="deco-circle deco-1"></view>
			<view class="deco-circle deco-2"></view>
		</view>
		
		<!-- 点击效果 -->
		<view class="click-effect" v-if="showClickEffect"></view>
	</view>
</template>

<script>
import { getToolTheme } from '@/utils/tool-theme-config.js'

export default {
	name: 'ToolCard',
	props: {
		tool: {
			type: Object,
			required: true,
			default: () => ({
				id: '',
				name: '工具',
				icon: '🔧',
				description: '工具描述',
				color: '#6A82FB',
				bgGradient: ['#6A82FB', '#FC5C7D'],
				category: 'primary'
			})
		},
		size: {
			type: String,
			default: 'normal',
			validator: function (value) {
				return ['small', 'normal', 'large'].indexOf(value) !== -1
			}
		},
		showArrow: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showClickEffect: false
		}
	},
	computed: {
		cardStyle() {
			// 使用工具的渐变色或回退到主题配置
			let gradient = this.tool.bgGradient
			
			// 如果没有自定义渐变，使用主题配置
			if (!gradient && this.tool.category) {
				const theme = getToolTheme(this.tool.category)
				gradient = theme.gradient
			}
			
			// 最终回退
			if (!gradient) {
				gradient = ['#6A82FB', '#FC5C7D']
			}
			
			return {
				background: `linear-gradient(135deg, ${gradient[0]} 0%, ${gradient[1]} 100%)`,
				opacity: this.disabled ? 0.6 : 1
			}
		},
		
		cardClass() {
			return [
				'tool-card',
				`size-${this.size}`,
				{
					'disabled': this.disabled,
					'with-arrow': this.showArrow
				}
			]
		}
	},
	methods: {
		handleTap() {
			if (this.disabled) return
			
			// 显示点击效果
			this.showClickEffect = true
			setTimeout(() => {
				this.showClickEffect = false
			}, 300)
			
			// 触发点击事件
			this.$emit('tap', this.tool)
		}
	}
}
</script>

<style lang="scss" scoped>
.tool-card {
	position: relative;
	border-radius: 20rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
	
	&:active:not(.disabled) {
		transform: scale(0.98);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
	}
	
	&:hover:not(.disabled) {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
	}
	
	&.disabled {
		cursor: not-allowed;
	}
	
	&.size-small {
		padding: 24rpx;
		border-radius: 16rpx;
		
		.tool-icon .icon-text {
			font-size: 48rpx;
		}
		
		.tool-name {
			font-size: 28rpx;
		}
		
		.tool-description {
			font-size: 22rpx;
		}
	}
	
	&.size-large {
		padding: 40rpx;
		border-radius: 24rpx;
		
		.tool-icon .icon-text {
			font-size: 80rpx;
		}
		
		.tool-name {
			font-size: 36rpx;
		}
		
		.tool-description {
			font-size: 28rpx;
		}
	}
}

.card-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	
	.tool-icon {
		margin-right: 24rpx;
		
		.icon-text {
			font-size: 64rpx;
			line-height: 1;
			filter: drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.1));
		}
	}
	
	.tool-info {
		flex: 1;
		
		.tool-name {
			display: block;
			font-size: 32rpx;
			font-weight: 600;
			color: white;
			margin-bottom: 8rpx;
			text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
		}
		
		.tool-description {
			display: block;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.9);
			line-height: 1.4;
			text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
		}
	}
	
	.card-arrow {
		.arrow-text {
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.8);
			font-weight: bold;
			text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
		}
	}
}

.card-decorations {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: none;
	
	.deco-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		
		&.deco-1 {
			width: 120rpx;
			height: 120rpx;
			top: -60rpx;
			right: -60rpx;
		}
		
		&.deco-2 {
			width: 80rpx;
			height: 80rpx;
			bottom: -40rpx;
			left: -40rpx;
			background: rgba(255, 255, 255, 0.05);
		}
	}
}

.click-effect {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: inherit;
	animation: clickPulse 0.3s ease-out;
	pointer-events: none;
}

@keyframes clickPulse {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(1.05);
	}
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.tool-card {
		padding: 28rpx;
		
		.card-content .tool-icon .icon-text {
			font-size: 56rpx;
		}
		
		.tool-name {
			font-size: 30rpx;
		}
		
		.tool-description {
			font-size: 22rpx;
		}
	}
}
</style>